<script setup lang='ts'>
import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import { useDebounceFn } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import Maximize from "./components/Maximize.vue";
import Tabs from "@/layouts/components/Tabs/index.vue";
import Footer from "@/layouts/components/Footer/index.vue";

const globalStore = useGlobalStore();
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);

const keepAliveStore = useKeepAliveStore();
const { keepAliveName } = storeToRefs(keepAliveStore);

const isRouteShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouteShow.value = val);
provide("refresh", refreshCurrentPage);

watch(
  () => maximize.value,
  () => {
    const app = document.getElementById("app") as HTMLElement;
    if (maximize.value) app.classList.add("main-maximize");
    else app.classList.remove("main-maximize");
  },
  { immediate: true }
);

const scrollTop = () => {
  const scrollableContainer: any = document.querySelector(".main");
  scrollableContainer.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth"
  });
};
provide("scrollTop", scrollTop);

const mainAnimation=computed(()=>globalStore.mainAnimation)
</script>

<template>
  <Maximize v-if="maximize" />
  <Tabs v-if="tabs" />
  <el-main class="main">
    <router-view v-slot="{ Component, route }">
      <transition appear :name="mainAnimation" mode="out-in">
        <keep-alive :include="keepAliveName">
          <component :is="Component" v-if="isRouteShow" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </el-main>
  <el-footer v-if="footer">
    <Footer />
  </el-footer>
</template>

<style lang="scss" scoped>
.el-main {
  box-sizing: border-box;
  padding: 10px 12px;
  overflow-x: hidden;
  background-color: var(--el-bg-color-page);
}
.el-footer {
  height: auto;
  padding: 0;
  background-color: var(--el-bg-color);
  color: var(--el-text-color-secondary);
}
</style>
